<template>
  <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearch"
    :placeholder="placeholder"
    @select="handleSelect"
    clearable
  />
</template>

<script lang='ts' setup>
import {
  ref, defineProps, withDefaults, getCurrentInstance, defineExpose, computed,
} from 'vue';
import Request from '@/api/request/request';

interface Props {
  url:string, // 请求数据的地址
  placeholder?: string,
  idName?: string,
  valueName?: string,
  modelValue: any,
}
const props = withDefaults(defineProps<Props>(), {
  placeholder: '请选择数据',
  idName: 'id',
  valueName: 'name',
});
const { proxy } = getCurrentInstance();

interface RestaurantItem {
  id: number
  value: string
}
// 对部门属性进行监听
const state = computed({
  get() { // 不能在get里面改变nodeName.value的值，所以在watch里面进行修改
    // nodeName.value=treeRef.value.getNode(props.modelValue).data["name"];
    return props.modelValue;
  },
  set(val) {
    proxy.$emit('update:modelValue', val);// 则传递给父组件
  },
});
// 可以自定义处理方法，也可以使用element-plus定义的方法
const filter = (arr:[]) => {
  let obj:{id:number, value:string};
  let list: any[] = [];
  arr.forEach((item:any) => {
    obj = {
      id: item[props.idName],
      value: item[props.valueName],
    };
    list.push(obj);
  });
  return list;
};
// const state = ref<string>();
// queryString 为在框中输入的值
// callback 回调函数,将处理好的数据推回
// 根据用户输入的字符串去后端查询对应的数据，然后通过自定义的数据处理方法，将数据处理成表单需要的数据，然后cb返回表单，表单才能相对应展示数据
const querySearch = async (queryString: string, cb: any) => {
  let resData:any = await new Request(props.url, null, {
    params: {
      name: queryString,
    },
  }).get();
  if (resData.code === 200) {
    const { data } = resData.data;
    let list = filter(data);
    cb(list);
  }
};
// 在点击选中建议，也就是点击从后端获取到的数据后，完成相对应的事件，例如查询某条数据（通常用于修改表单绑定值）
// eslint-disable-next-line @typescript-eslint/no-empty-function
const handleSelect = (item: RestaurantItem) => {
  proxy.$emit('handleSelect', item);
  state.value = item.value; // 对应修改表单绑定值
};
</script>

<style scoped>

</style>
